import "./index.css";
import { defineComponent } from "vue";
import tagItem from "./tagItem";
import { withInstall } from "@pureadmin/utils";
import { PxIcon } from "px-ui";
import { WarnTriangleFilled } from "@px-ui/icons-vue";

const ReTag = withInstall(tagItem);

const props = {
  size: {
    type: String,
    default: "default"
  },
  tags: {
    type: Array<String>,
    require: false,
    default: () => []
  }
};

export default defineComponent({
  name: "ReTags",
  props,
  setup(props) {
    // const { tags, size } = props;
    return () => (
      <div class="self-tags">
        {props.tags.map((t: string) => {
          return t === "alarm" ? (
            <PxIcon style={{ color: "red", fontSize: "18px" }}>
              <WarnTriangleFilled />
            </PxIcon>
          ) : (
            <ReTag type={t} size={props.size} />
          );
        })}
      </div>
    );
  }
});
